<template>
  <div class="GoodsList">
    <!-- 顶部 -->
    <van-nav-bar
      title="传智播客.黑马程序员Vue.js"
      style="background-color: #26a2ff; margin-bottom: 5px"
    />
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="商品展示列表"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-icon
            name="wap-home-o"
            size="18"
            @click="$router.push({ name: 'Home' })"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- 商品列表 -->
    <!-- 上拉刷新 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <!-- 下拉刷新 -->
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <div class="goodsL">
          <div
            class="goodsItem"
            v-for="goods in goodsList"
            @click="$router.push({ path: `/GoodsDetial/${goods.id}` })"
            :key="goods.id"
          >
            <div class="Goods">
              <div class="GoddsPic">
                <img :src="goods.img_url" alt="" />
              </div>
              <p>{{ goods.title }}</p>
            </div>
            <div class="GoodInfo">
              <p>
                <span>￥{{ goods.market_price }}</span>
                <span
                  >￥<i>{{ goods.sell_price }}</i></span
                >
              </p>
              <p>
                <span>热卖中</span> <span>剩{{ goods.stock_quantity }}件</span>
              </p>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </van-list>
  </div>
</template>

<script>
import { getgoodsList } from "@/apis/productDisplay";
export default {
  data() {
    return {
      goodsList: [],
      loading: false,
      finished: false,
      pageindex: 1,
      isLoading: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //   下拉刷新
    onRefresh() {
      this.pageindex = 0;
      this.goodsList.length = 0;
      this.finished = false;
      if (this.finished !== true) {
        this.pageindex = 1;
        this.finished = false;
        this.init();
      } else {
        this.finished = false;
      }
    },
    //   上拉刷新
    onLoad() {
      this.pageindex++;
      this.init();
    },
    async init() {
      let res = await getgoodsList({ pageindex: this.pageindex });
      console.log(res);
      this.goodsList.push(...res.data.message);
      this.loading = false;
      console.log(this.goodsList);
      this.isLoading = false;
      if (res.data.message.length === 0) {
        this.finished = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__title {
  color: #fff;
}
.header {
  /deep/ .van-nav-bar__title {
    color: #1989fa;
  }
}

/deep/ .van-nav-bar {
  background-color: #f7f7f7;
}

.goodsL {
  display: flex;
  flex-wrap: wrap;
}
.goodsItem {
  width: 160/360 * 100vw;
  //   height: 290/360 * 100vw;
  margin: 10px 10px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);

  .Goods {
    height: 200/360 * 100vw;
    width: 100%;
    background-color: #fff;
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 3;
    overflow: hidden;
    .GoddsPic {
      padding: 0 5px;
      img {
        width: 100%;
      }
    }
    p {
      padding: 0 5px;
      font-size: 12/360 * 100vw;
      line-height: 23/360 * 100vw;
    }
  }
  .GoodInfo {
    width: 100%;
    // height: 70/360 * 100vw;
    background-color: #f0f0f0;
    padding: 10px 10px 5px 5px;
    p:nth-child(1) {
      font-size: 16/360 * 100vw;
      span:nth-child(1) {
        font-weight: 600;
        color: #f9331d;
        margin-right: 20/360 * 100vw;
      }
      span:nth-child(2) {
        color: #666;
        text-decoration: line-through;
        i {
          font-size: 14/360 * 100vw;
        }
      }
    }
    p:nth-child(2) {
      margin-top: 20/360 * 100vw;
      font-size: 14/360 * 100vw;
      display: flex;
      justify-content: space-between;
      color: #666;
    }
  }
}
</style>
